<template>
  <div class="data-view">
    <div class="data-head">
      <div class="head-start">
        <slot name="head-start"></slot>
      </div>
      <div class="head-center">
        <slot name="head-center"></slot>
      </div>
      <div class="head-end">
        <slot name="head-end">
          <div class="raw-action">
            <div class="action-item">
              <el-select v-model="lang" size="mini" placeholder="请选择">
                <el-option
                  v-for="item in rawOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="action-item">
              <el-button @click="handleShowSetting" size="mini" icon="el-icon-setting">设置</el-button>
            </div>
          </div>
        </slot>
      </div>
    </div>
    <div class="data-body">
      <slot name="body-center">
        <DataText :value="value" />
      </slot>
    </div>
    <div class="data-foot">
      <div class="foot-start">
        <slot name="foot-start">
          <div class="panel-title">预览</div>
        </slot>
      </div>
      <div class="foot-center">
        <slot name="foot-center"></slot>
      </div>
      <div class="foot-end">
        <slot name="foot-center"></slot>
      </div>
    </div>
    <div class="view-panel">
      <DataText :value="text"></DataText>
    </div>
    <el-drawer
      title="设置"
      :visible.sync="settingVisible"
      direction="rtl"
      custom-class="drawer-setting"
      size="280px">
      <div class="panel-setting">
        <el-collapse v-model="activeCollapse" accordion>
          <el-collapse-item title="JSON" name="1">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="层级">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="表格" name="2">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="集合属性">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import DataRow from './row.vue'
import DataKeyValue from './key-value.vue'
import DataText from './text.vue'
import columns from '../constant/key-value-columns.js'

export default {
  components: {
    DataRow,
    DataKeyValue,
    DataText
  },

  props: {
    columns: {
      default () {
        return columns
      }
    },
    value: {
      default () {
        return ''
      }
    },
    language: {
      default () {
        return 'text'
      }
    }
  },

  data () {
    return {
      lang: 'text',
      text: '',
      rawOptions: [
        {
          value: 'json',
          label: 'JSON'
        },
        {
          value: 'table',
          label: 'Table'
        },
        {
          value: 'html',
          label: 'HTML'
        },
        {
          value: 'xml',
          label: 'XML'
        },
        {
          value: 'text',
          label: 'Text'
        },
        {
          value: 'javascript',
          label: 'JavaScript'
        }
      ],
      settingVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      activeCollapse: '1'
    }
  },

  watch: {
    value() {
      this.text = this.value
    }
  },

  methods: {
    // 格式化数据
    formatValue () {

    },
    // 显示设置
    handleShowSetting () {
      this.settingVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
.data-view {
  .data-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .head-start:not(:empty) + .head-center {
    padding-left: 8px;
  }
  .head-center {
    flex: 1;
    padding: 0 8px 0 0;
  }
  .raw-action {
    display: flex;
    .action-item {
      margin-left: 8px;
    }
    /deep/.el-select {
      width: 120px;
    }
  }
  .data-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
.panel-title {
  font-weight: 700;
  color: #666;
  font-style: italic;
}
.view-panel {
  min-height: 180px;
}
</style>

<style lang="less">
.drawer-setting {
  .el-drawer__header {
    margin-bottom: 8px;
    padding: 8px;
  }
  .panel-setting {
    padding: 0 8px;
  }
  .el-collapse-item__content {
    padding-bottom: 0;
  }
}
</style>